import './ListItem.scss'
import React from 'react'
import {connect} from 'react-redux'

//列表单个组件
class ListItem extends React.Component {
  constructor(prors) {
    super(prors)
  }
  
  //渲染品牌和新到
  renderBrand(data) {
    if (data.brand_type) {
      return <div className='brand brand-pin'>品牌</div>
    } else {
      return <div className='brand brand-xin'>新到</div>
    }
  }
  
  //渲染5颗星方法
  renderScore(data) {
    let score = data.wm_poi_score || ''
    score = score.toString()
    let scoreArray = score.split('.')
    //满星个数
    let fullstar = parseInt(scoreArray[0])
    //半颗星
    let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0
    let nullstar = 5 - fullstar - halfstar
    let starArray = []
    for (let i = 0; i < fullstar; i++) {
      starArray.push(<div key={i + 'full'} className='star fullstar'></div>)
    }
    if (halfstar) {
      for (let j = 0; j < halfstar; j++) {
        starArray.push(<div key={j + 'half'} className='star halfstar'></div>)
      }
    }
    if (nullstar) {
      for (let k = 0; k < nullstar; k++) {
        starArray.push(<div key={k + 'null'} className='star nullstar'></div>)
      }
    }
    return starArray
  }
  
  //月销售数
  renderMonthNum(data) {
    let num = data.month_sale_num
    
    if (num > 999) {
      return '999+'
    }
    return num
  }
  
  //美团专送图标
  renderMeituanFlag(data) {
    if (data.delivery_type) {
      return (
        <div className='item-meituan-flag'>美团专送</div>
      )
    }
  }
  
  //渲染商家活动
  renderOthters(data) {
    let array = data.discounts2
    return array.map((item, index) => {
      return (
        <div key={index} className='other-info'>
          <img className='other-tag' src={item.icon_url}/>
          <div className='other-content'>{item.info}</div>
        </div>
      
      )
    })
  }
  
  render() {
    //父子组件传值
    let data = this.props.itemData
    return (
      <div className='list-item-content scale-1px'>
        <img className='item-img' src={data.pic_url}/>
        {this.renderBrand(data)}
        <div className='item-info-content'>
          <p className='item-title'>{data.name}</p>
          <div className='item-desc clearfix'>
            <div className='item-score'>{this.renderScore(data)}</div>
            <div className='item-count'>月售{this.renderMonthNum(data)}</div>
            <div className='item-distance'>&nbsp;{data.distance}</div>
            <div className='item-time'>{data.mt_delivery_time}&nbsp;|</div>
          </div>
          <div className='item-price'>
            <div className='item-pre-price'>{data.min_price_tip}</div>
            {this.renderMeituanFlag(data)}
          </div>
          <div className='item-others'>
            {this.renderOthters(data)}
          </div>
        </div>
      </div>
    )
  }
}

export default connect()(ListItem)